<template>
  <view class="page flex-col">
    <view class="section_1 flex-row" :style="{ paddingTop: safeTop + 45 + 'px' }">
      <view class="section_2 flex-col">
        <!--  <view class="group_1 flex-row justify-between">
          <text class="text_1">11:01&nbsp;AM</text>
          <image
            class="image_1"
            referrerpolicy="no-referrer"
            src="/static/images/SketchPng97db298e29d2d21eaffb50e6b2ac255a1b90358710d543d206d7b54e397bad8c.png"
          />
        </view> -->

        <image
          class="image_3"
          referrerpolicy="no-referrer"
          src="/static/images/SketchPngaccc829dbaf7083022044009ce60e03075887085a46909f76f9626a951fb35a7.png"
        />
        <view class="text-wrapper_1 flex-col">
          <text class="text_2">正風學習中心教研组权威研发，全面评估。</text>
        </view>
        <view class="image-wrapper_1 flex-col">
          <image
            class="image_4"
            referrerpolicy="no-referrer"
            src="/static/images/SketchPng3abf388eb725175fbbf9eda5b974f93849844085173152f116be4f4545f914a5.png"
          />
        </view>
        <view class="list_1 flex-row">
          <view
            v-for="(item, index) in loopData0"
            :key="index"
            class="image-text_1 flex-col"
          >
            <image
              class="label_1"
              referrerpolicy="no-referrer"
              :src="item.lanhuimage0"
            />
            <view class="text-group_1 flex-col">
              <text class="text_3" v-html="item.lanhutext0" />
              <text class="text_4" v-html="item.lanhutext1" />
            </view>
          </view>
        </view>
        <!-- <view class="text-wrapper_2 flex-row">
          <text class="text_4">15min定位基础</text>
          <text class="text_5">专业诊断报告</text>
          <text class="text_6">AI精准评估</text>
        </view> -->
        <view class="text-wrapper_3 flex-col" @tap.stop="navTo(mRouteConfig.ready, { })">
          <text class="text_7">继续测评</text>
        </view>
        <view class="group_2 flex-col">
          <view class="group_3 flex-row">
            <view class="block_1 flex-row justify-between">
              <view class="text-wrapper_5 flex-col">
                <text class="text_9">&nbsp;正風</text>
              </view>
              <text class="text_10">學習中心</text>
            </view>
          </view>
          <view class="image-wrapper_3 flex-row">
            <image
              class="image_5"
              referrerpolicy="no-referrer"
              src="/static/images/SketchPngd32df0c0ea1cec5504954cc9142ec2537804b65d51ffac06e0a2cdfe49ae6fc6.png"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import mRouteConfig from '@/config/routes';
import store from '@/store';
import {Route} from '@/response/route';
import mRouter from '@/utils/routerUtil';
import mHelper from "@/utils/helper";
import { ref, onMounted, computed, reactive } from 'vue';
import {} from 'vue';

let state = reactive({
  userInfo: {} as Profile,
  page: 1,
  loadingType: "more",
  integralList: [] as CreditsLog[],
  tabCurrentIndex: 0,
  loading: true,
});
// 是否登录
let hasLogin = computed(() => {
  return store.getters['user/hasLogin'];
});

interface LoopItem {
  lanhuimage0: string;
  lanhutext0: string;
  lanhutext1: string;
}
// 头部安全距离
const safeTop = computed(() => {
  let sysInfo: AnyObject = uni.getSystemInfoSync();
  return sysInfo?.safeAreaInsets?.top || 0;
});

// 统一跳转接口,拦截未登录路由
const navTo = (route: Route, query = {}) => {
	console.log("Route", mRouteConfig.questionLog)
  if (!route) return;
  if (!state.userInfo?.memberCard?.status && route === mRouteConfig.accountCenter) return;
  !hasLogin.value ? mHelper.backToLogin() : mRouter.push({route, query});
};
// 自定义链接跳转
const normalNavTo = (link: AnyObject, title: string) => {
  if (!hasLogin.value) {
    mHelper.backToLogin();
    return;
  }
  if (link.route === 'serviceCenter') {
    navTo(mRouteConfig.serviceCenter);
    return;
  }
  if (link.route === 'service') {
    if (globalConfig.value.app_service_type === 0) {
      mHelper.toast('暂不提供客服功能');
      return;
    }
    toService(link);
    return;
  }
  if (title === '分享') {
    if (mHelper.platformGroupFilter() !== PlatformGroupEnum.WECHAT_MP) {
      share();
    }
    return;
  }
  mHelper.handleBasicNavTo(link);
};
const loopData0 = ref<LoopItem[]>([
  {
    lanhuimage0:
      'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/63e81b7534a84f10ab0621a7cf925a2e_mergeImage.png',
    lanhutext0: '快',
    lanhutext1: '15min定位基础'
  },
  {
    lanhuimage0:
      'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/9d31f9db9d944881a16c505b9b95e194_mergeImage.png',
    lanhutext0: '全',
    lanhutext1: '专业诊断报告'
  },
  {
    lanhuimage0:
      'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/76bca9adfa634e378f3db02f20a3c551_mergeImage.png',
    lanhutext0: '准',
    lanhutext1: 'AI精准评估'
  }
]);

const statusBarHeight = ref(0);

onMounted(() => {
  // @ts-ignore
  statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight || 0;
});
</script>

<style lang='scss'>
@import '@/static/css/common/common.scss';

/* background: url(/static/images/SketchPngec8edb727ac6e9333e2b48ce14714ce2399e429c6d3106f1d5ebfe4fb89ea277.png) -76rpx
          422rpx no-repeat; */


.page {
  background: linear-gradient(135deg, #e6f0ff 0%, #b3d1ff 100%);
  position: relative;
  overflow: hidden;
  min-height:100vh;
  .section_1 {
	background: url('/static/image/top_bg.png') top center no-repeat;
	background-size: 100% 400rpx, 100% 100%;
    .section_2 {
      position: relative;
      margin-bottom: 118rpx;
      padding: 24rpx 26rpx 70rpx 24rpx;


      .image_3 {
        width: 190rpx;
        height: 128rpx;
        margin: 158rpx 468rpx 0 42rpx;
      }
      .text-wrapper_1 {
        background: url(/static/images/SketchPngd2ccfcd9fe810f4d9f0ce93d3571fa2e477667d02bd81b41404689d61a99e01f.png)
          100% no-repeat;
        background-size: 100% 100%;
        margin: 50rpx 40rpx 0 284rpx;
        padding: 44rpx 10rpx 72rpx 24rpx;
        .text_2 {
          width: 342rpx;
          height: 72rpx;
          overflow-wrap: break-word;
          color: rgba(52, 52, 52, 1);
          font-size: 30rpx;
          letter-spacing: 0.9487500190734863px;
          font-family: TaipeiSansTCBeta-Light;
          font-weight: 300;
          text-align: left;
          line-height: 36rpx;
        }
      }
      .image-wrapper_1 {
        background: url(/static/images/SketchPng1cbfcb346d7deff2d3dc1995b48e782aedf3259654bcb0f9170f0cc5242a6333.png) -148rpx -176rpx
          no-repeat;
        background-size: 736rpx 764rpx;
        margin: 20rpx 164rpx 0 124rpx;
        .image_4 {
          width: 404rpx;
          height: 372rpx;
          margin: 0 -16rpx 40rpx 24rpx;
        }
      }
      .list_1 {
        width: 568rpx;
        height: 200rpx;
        margin: 20rpx 50rpx 0 82rpx;
        .image-text_1 {
          height: 116rpx;
          margin: 8rpx 176rpx 0 0;
          .label_1 {
            width: 70rpx;
            height: 66rpx;
          }
          .text-group_1 {
            margin: 8rpx -68rpx 0 -52rpx;
            .text_3 {
              overflow-wrap: break-word;
              color: rgba(0, 0, 0, 1);
              font-size: 30rpx;
              letter-spacing: 0.9375px;
              font-family: PingFangSC-Semibold;
              font-weight: 600;
              text-align: right;
              white-space: nowrap;
              line-height: 42rpx;
              margin: 0 86rpx 0 72rpx;
            }
            .text_4 {
              width: 190rpx;
              overflow-wrap: break-word;
              color: #343434;
              font-size: 26rpx;
              letter-spacing: 0.8125px;
              font-weight: normal;
              text-align: center;
              white-space: nowrap;
              line-height: 36rpx;
              margin-top: 6rpx;
            }
          }
        }
      }
      .text-wrapper_2 {
        margin: 6rpx 20rpx 0 30rpx;
        .text_4 {
          width: 190rpx;
          overflow-wrap: break-word;
          color: rgba(52, 52, 52, 1);
          font-size: 26rpx;
          letter-spacing: 0.8125px;
          font-weight: NaN;
          text-align: right;
          white-space: nowrap;
          line-height: 36rpx;
          margin-top: 6rpx;
        }
        .text_5 {
          overflow-wrap: break-word;
          color: rgba(52, 52, 52, 1);
          font-size: 26rpx;
          letter-spacing: 0.8125px;
          font-weight: NaN;
          text-align: right;
          white-space: nowrap;
          line-height: 36rpx;
          margin-left: 64rpx;
        }
        .text_6 {
          overflow-wrap: break-word;
          color: rgba(52, 52, 52, 1);
          font-size: 26rpx;
          letter-spacing: 0.8125px;
          font-weight: NaN;
          text-align: right;
          white-space: nowrap;
          line-height: 36rpx;
          margin-left: 92rpx;
        }
      }
      .text-wrapper_3 {
        background: url(/static/images/SketchPngabef0e8dd84dcacc549cdc23d4bb502e9d5f36c9f8ab4709a0d12df559e7542a.png)
          100% no-repeat;
        background-size: 100% 100%;
        margin: 48rpx 136rpx 0 140rpx;
        padding: 28rpx 144rpx 26rpx 144rpx;
        .text_7 {
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 32rpx;
          letter-spacing: 1px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          text-align: left;
          white-space: nowrap;
          line-height: 44rpx;
        }
      }
      .group_2 {
        height: 596rpx;

        background-size: 750rpx 398rpx;
        width: 596rpx;
        position: absolute;
        left: 76rpx;
        top: -422rpx;
        padding: 452rpx 4rpx 0 8rpx;


        .group_3 {
          margin: 96rpx 336rpx 0 0;
          .block_1 {
            border-radius: 4px;
            width: 248rpx;
            border: 1.1px solid rgba(247, 55, 38, 1);
            padding-right: 2rpx;
            .text-wrapper_5 {
              background-color: rgba(247, 55, 38, 1);
              border-radius: 4px 0px 0px 4px;
              .text_9 {
                height: 56rpx;
                overflow-wrap: break-word;
                color: rgba(255, 255, 255, 1);
                font-size: 38rpx;
                letter-spacing: 1.2175625562667847px;
                font-family: STYuanti-SC-Regular;
                font-weight: NaN;
                text-align: left;
                white-space: nowrap;
                line-height: 56rpx;
                margin: -2rpx 0 6rpx 8rpx;
              }
            }
            .text_10 {
              overflow-wrap: break-word;
              color: rgba(52, 52, 52, 1);
              font-size: 28rpx;
              letter-spacing: 0.893750011920929px;
              font-weight: NaN;
              text-align: left;
              white-space: nowrap;
              line-height: 40rpx;
              margin-top: 10rpx;
            }
          }
        }
        .image-wrapper_3 {
          margin: 30rpx 162rpx 0 174rpx;
          .image_5 {
            width: 248rpx;
            height: 90rpx;
          }
        }
      }

    }


  }
}

</style>
